<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.xjw-image {
  width: 100%;
  height: 100%;
  border-radius: 8upx;
  overflow: hidden;
  .xjw-image_image {
    width: 100%;
    height: 100%;
  }
}
</style>
<template>
  <view class="xjw-image">
    <image
      class="xjw-image_image"
      :src="imageSrc"
      :lazy-load="lazy"
      :mode="mode"
      @load="load"
      @error="error"
      @tap="previewImage"
    />
  </view>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import { Component, Prop, Watch } from "vue-property-decorator";

const defaultImage: string =
  "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1183417802,3760407947&fm=26&gp=0.jpg";

@Component
export default class Index extends Vue {
  @Prop({ type: String, default: "" }) src;
  @Prop({ type: Boolean, default: false }) lazy;
  @Prop({ type: Array as PropType<Array<string>> }) previewSrcList;
  @Prop({ type: Number, default: null }) imageIndex;
  @Prop({ type: String, default: "scaleToFill" }) mode;
  @Prop({ type: String, default: "" }) suffix;
  imageSrc: string = "";

  @Watch("src", {
    immediate: true
  })
  watchUrl() {
    if (!this.src) {
      this.imageSrc = defaultImage;
    } else {
      this.imageSrc = this.src + this.suffix;
    }
  }

  previewImage() {
    if (this.previewSrcList && this.previewSrcList.length > 0) {
      let current: number = 0;
      if (this.imageIndex === null) {
        current = this.previewSrcList.findIndex(
          itemSrc => itemSrc === this.src
        );
      }
      // 预览图片
      uni.previewImage({
        current: current.toString(),
        urls: this.previewSrcList
      });
    }
  }

  load() {}

  error() {
    this.imageSrc = defaultImage;
  }
}
</script>
